<extend name="Layout/index" />
<block name="link">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/index.css">
</block>
<block name="search">
</block>
<block name="main">
    <div class="row">
        <div class="col-md-6 ">
            <b>前台用户统计</b><br>
                总数：<span id="total"><{$total}></span><br>
                被禁言人数：<span id="nospeak"><{$nospeak}></span><br>
                被封号人数：<span id="kill"><{$kill}></span><br>
                正常人类：<span id="normal"><{$normal}></span><br>
            <br>
        </div>
        <div class="col-md-6 ">
            <b>发表经验统计</b><br>
            经验篇数：<span id="num"><{$num}></span>
        </div>
        <canvas id="bchart" height="400" width="700">
            </canvas>
    </div>
    
</block>
<block name="jquery">
    <script type="text/javascript">
            var total = $('#total').text();
            var nospeak = $('#nospeak').text();
            var kill = $('#kill').text();
            var normal = $('#normal').text();
            var num = $('#num').text();
            // chart sample data
            var arrVisitors = new Array();
            arrVisitors[0] = "用户数量, "+ total;
            arrVisitors[1] = "被禁言人数, " + nospeak;
            arrVisitors[2] = "被封号人数, "+ kill;
            arrVisitors[3] = "正常人类, " + normal;
            arrVisitors[4] = "总经验篇数, " + num;
            var canvas;
            var context;
            // chart properties
            var cWidth, cHeight, cMargin, cSpace;
            var cMarginSpace, cMarginHeight;
            // bar properties
            var bWidth, bMargin, totalBars, maxDataValue;
            var bWidthMargin;
            // bar animation
            var ctr, numctr, speed;
            // axis property
            var totLabelsOnYAxis;
            // barchart constructor
            function barChart() {
                canvas = document.getElementById('bchart');
                if (canvas && canvas.getContext) {
                    context = canvas.getContext('2d');
                }
                chartSettings();
                drawAxisLabelMarkers();
                drawChartWithAnimation();
            }
            // initialize the chart and bar values
            function chartSettings() {
                // chart properties
                cMargin = 25;
                cSpace = 60;
                cHeight = canvas.height - 2 * cMargin - cSpace;
                cWidth = canvas.width - 2 * cMargin - cSpace;
                cMarginSpace = cMargin + cSpace;
                cMarginHeight = cMargin + cHeight;
                // bar properties
                bMargin = 45;
                totalBars = arrVisitors.length;
                bWidth = (cWidth / totalBars) - bMargin;
                // find maximum value to plot on chart
                maxDataValue = 0;
                for (var i = 0; i < totalBars; i++) {
                    var arrVal = arrVisitors[i].split(",");
                    var barVal = parseInt(arrVal[1]);
                    if (parseInt(barVal) > parseInt(maxDataValue))
                        maxDataValue = barVal;
                }
                totLabelsOnYAxis = 10;
                context.font = "10pt Garamond";

                // initialize Animation variables
                ctr = 0;
                numctr = 100;
                speed = 10;
            }
            // draw chart axis, labels and markers
            function drawAxisLabelMarkers() {
                context.lineWidth = "2.0";
                // draw y axis
                drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
                // draw x axis
                drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight);
                context.lineWidth = "1.0";
                drawMarkers();
            }
            // draw X and Y axis
            function drawAxis(x, y, X, Y) {
                context.beginPath();
                context.moveTo(x, y);
                context.lineTo(X, Y);
                context.closePath();
                context.stroke();
            }
            // draw chart markers on X and Y Axis
            function drawMarkers() {
                var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);
                context.textAlign = "right";
                context.fillStyle = "#000";;
                // Y Axis
                for (var i = 0; i <= totLabelsOnYAxis; i++) {
                    markerVal = i * numMarkers;
                    markerValHt = i * numMarkers * cHeight;
                    var xMarkers = cMarginSpace - 5;
                    var yMarkers = cMarginHeight - (markerValHt / maxDataValue);
                    context.fillText(markerVal, xMarkers, yMarkers, cSpace);
                }
                // X Axis
                context.textAlign = 'center';
                for (var i = 0; i < totalBars; i++) {
                    arrval = arrVisitors[i].split(",");
                    name = arrval[0];
                    markerXPos = cMarginSpace + bMargin
                            + (i * (bWidth + bMargin)) + (bWidth/2);
                    markerYPos = cMarginHeight + 10;
                    context.fillText(name, markerXPos, markerYPos, bWidth);
                }
                context.save();
                // Add Y Axis title
                context.translate(cMargin + 10, cHeight / 2);
                context.rotate(Math.PI * -90 / 180);
                context.fillText('摆渡数据统计', 1, 1);
                context.restore();
                // Add X Axis Title
                context.fillText('Year Wise', cMarginSpace +
                        (cWidth / 2), cMarginHeight + 30 );
            }
            function drawChartWithAnimation() {
                // Loop through the total bars and draw
                for (var i = 0; i < totalBars; i++) {
                    var arrVal = arrVisitors[i].split(",");
                    bVal = parseInt(arrVal[1]);
                    bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;
                    bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;
                    bY = cMarginHeight - bHt - 2;
                    drawRectangle(bX, bY, bWidth, bHt, true);
                }
                // timeout runs and checks if bars have reached
                // the desired height; if not, keep growing
                if (ctr < numctr) {
                    ctr = ctr + 1;
                    setTimeout(arguments.callee, speed);
                }
            }
            function drawRectangle(x, y, w, h, fill) {
                context.beginPath();
                context.rect(x, y, w, h);
                context.closePath();
                context.stroke();
                if (fill) {
                    var gradient = context.createLinearGradient(0, 0, 0, 500);
                    gradient.addColorStop(0, 'red');
                    gradient.addColorStop(1, 'rgba(0,0,250,.15)');
                    context.fillStyle = gradient;
                    context.strokeStyle = gradient;
                    context.fill();
                }
            }

            window.onload = barChart();
        </script>
        <noscript>
            This chart is unavailable because JavaScript is disabled on your computer. Please enable
            JavaScript and refresh this page to see the chart in action.
        </noscript>
</block>